<template>
    <div>
       <!-- 搜索条 -->
        <search-bar></search-bar>
        <!-- 菜单 -->
        <div class="content">
            <div class="left">
                <div @click="changeHandle(item.cat_id)" :class="['menu-item', currentIndex==item.cat_id?'active':'']" :key="item.cat_id" v-for="item in listData">{{item.cat_name}}</div>
            </div>
             <!-- 右侧分类信息 -->
            <div class="right">
                <div class="brand-item" :key="item.cat_id" v-for="item in rightData">
                    <div class="brand-title">
                        {{item.cat_name}}
                    </div>
                    <div class="brand-list" >
                        <div class="brand" :key="i" v-for="(brand,i) in item.children">
                            <img :src="brand.cat_icon">
                            <p>{{brand.cat_name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SearchBar from '../../components/SearchBar'
import request from '../../utils/request.js'
export default {
  components: {
    'search-bar': SearchBar
  },
  data() {
      return {
          listData: [],
          currentIndex: 1
      }
  },
  computed: {
      rightData() {
          let rd = this.listData.filter(item=>{
              return item.cat_id == this.currentIndex
          })
          return rd.length>0?rd[0].children:[]
      }
  },
  methods: {
      async initData() {
          let res = await request('categories')
          this.listData = res.data.message
      },
      changeHandle (id) {
      // 左侧菜单的切换操作
      this.currentIndex = id
    },
  },
  created() {
      this.initData()
  },
}
</script>

<style scoped lang='less'>
@import './main.less';
</style>
